<template>
  <div class="warpper">
    <todo-input />
    <todo-list :todoList="todoList" />
    <div class="footer">
      <p>Services provided by <span><a href="https://gitee.com/backpackerxl">Backpackerxl</a></span></p>
  </div>
  </div>
</template>

<script lang="ts">
import TodoInput from "./components/todoinput/index.vue";
import TodoList from "./components/todolist/index.vue";
import { computed, defineComponent, onMounted } from "vue";
import { UseTodo, IUseTodo } from "./hooks";
import { Store, useStore } from "vuex";

export default defineComponent({
  name: "App",
  components: {
    TodoInput,
    TodoList
  },
  setup() {
    const { setTodoList }: IUseTodo = UseTodo();
    const store: Store<any> = useStore();

    onMounted(() => {
      setTodoList();
    });

    return {
      todoList: computed(() => store.state.list)
    };
  }
});
</script>
<style>
  .warpper{
   padding: 0;
   margin: 0;
   background: url(./assets/bg.png) repeat-y;
  }
  .footer {
    width: 100%;
    height: 30px;
    background: #4fd1f1d0;
    color: #fff;
    text-align: center;
    line-height: 0px;
    position: fixed;
    bottom: 0;
    z-index: 10000;
  }
  .footer span{
    color: #f97e00;
  }
  .footer span a{
    color: #f97e00;
    text-decoration: none;
  }
  .footer span a:hover{
    color: #f97e00;
  }
</style>